<template>
    <div class="box">
        <header class="header">
          <!-- <ul>
            <li @click="back"><i class="iconfont icon-jiantouarrowhead7"></i></li>
            <li><h5>时光记</h5></li>
            <router-link to="/dcimImport" tag="li"><p>导入</p></router-link>
          </ul> -->
          <mt-header title="multiple button">
            <router-link to="../Timenotes" slot="left">
              <mt-button icon="back" style="color:white"></mt-button>
              <mt-button @click="handleClose" style="color:white;margin-left:108px">时光记</mt-button>
            </router-link>
            <mt-button icon="more" slot="right"></mt-button>
          </mt-header>
    
        </header>
        <div class="content">
          <div class="timeWrap">
            <time class="time">2018/11/11 11:11</time>
          </div>
          <div class="photo">
            <ul>
              <li><img src="@/../static/01.jpg" alt=""></li>
              <li><img src="@/../static/02.jpg" alt=""></li>
              <li><img src="@/../static/03.jpg" alt=""></li>
              <li><img src="@/../static/04.jpg" alt=""></li>
            </ul>
            <ul>
              <li><img src="@/../static/05.jpg" alt=""></li>
              <li><img src="@/../static/06.jpg" alt=""></li>
              <li><img src="@/../static/07.jpg" alt=""></li>
              <li><img src="@/../static/08.jpg" alt=""></li>
              <li><img src="@/../static/09.jpg" alt=""></li>
              <!-- <li><img src="@/../static/10.jpg" alt=""></li> -->
            </ul>
          </div>
        </div>
    </div>
</template>

<script>
export default {
  methods: {
    back () {
      this.$router.go(-1)
    },
    handleClose(){}
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.container .box .header {
  // @include rect(100%, 0.4rem);
  // @include background-color(#DFDFDF);
  ul {
    @include rect (95%, 100%);
    // background:red;
    margin:0 auto;
    @include flexbox();
    @include justify-content(space-between);
    @include align-items();
    li {
      i{
        @include font-size(0.15rem);
        @include text-color(#101010);
      }
      h5 {
        @include font-size(0.15rem);
        @include text-color(#101010);
        @include font-weight(100);
      }
    }
  }
}
.content {
  // @include rect (100%, auto);
  // background: red;
  .timeWrap {
    .time {
    @include rect (100%, 0.16rem);
    @include margin(0.15rem);
    @include text-color(#717070);
    }
  }
  .photo {
    @include rect(96%, auto);
    @include margin(0 2%);
    @include flexbox();
    @include justify-content(space-between);
    ul {
      width:48%;
      // float:left;
      li {
        @include rect(100%, auto);
        margin-bottom:0.15rem;
        img {
          @include rect(100%, auto);
          border-radius: 0.15rem;
        }
      }
    }
  }
}
</style>
